<?php if (!defined('THINK_PATH')) exit();?><style type="text/css">
    .update_tb tr {
        height: 30px;
    }

    #zpyl label {
        display: inline-block;
        width: 70px;
        padding: 5px 0 5px 10px;
    }

    #zpyl div {

        padding: 5px 0 5px 0px;
    }
</style>

<table id="wallhavenpic-dg"></table>


<div id="tool-mes">
    <table>
        <tr>
            <td>
                <input id="general_categories" type="checkbox" name="categories" value="1" checked="checked"/>普通
                <input id="anime_categories" type="checkbox" name="categories" value="1" checked="checked"/>漫画
                <input id="people_categories" type="checkbox" name="categories" value="1" checked="checked"/>人物
            </td>
            <td>
                <input id="sfw_categories" type="checkbox" name="categories" value="1" checked="checked"/>sfw
                <input id="sketchy_categories" type="checkbox" name="categories" value="1"/>sketchy
                <input id="nsfw_categories" type="checkbox" name="categories" value="1"/>nsfw
            </td>
            <td>
                <input id="search_q" class="easyui-textbox" data-options="prompt:''" style="width:100px">
                <a href="#" class="easyui-linkbutton" onclick="search_haven()"
                   data-options="iconCls:'icon-search',plain:'true'">搜索</a>
            </td>


            <td>


                <a href="#" class="easyui-linkbutton" onclick="downloads()"
                   data-options="iconCls:'icon-standard-folder-picture',plain:'true'">下载</a>
            </td>
        </tr>
    </table>


</div>
<!--工具栏 -->
<script type="text/javascript">

    function downloads() {
        var rows = $('#wallhavenpic-dg').datagrid("getSelections");
        $.post(APP + '/Home/Wallhaven/downpic', {
            rows: rows
        }, function (data) {

            $.messager.alert('成功', data.msg, 'info');
        }, 'json');
    }

    var data = getvalue();
    $('#wallhavenpic-dg').datagrid({
        url: APP + '/Home/Wallhaven/getpic',
        queryParams: {
            categories: data.categories,
            purity: data.purity,
            q: data.q
        },
        toolbar: '#tool-mes',
        pagination: true,
        fit: true,
        width: function () {
            return document.body.clientWidth * 0.9
        },
        nowrap: false,//
        collapsible: true,
        fitColumns: true,
        autoRowHeight: true,
        striped: true,//交替行
        singleSelect: false,//只允许选择一行
        rownumbers: true,
        border: false,
        sortName: 'url',
        sortOrder: 'desc',//倒序排列
        remoteSort: false,
        pageSize: 50,
        method: "post",
        pageList: [20, 40, 50, 100, 200, 500],
        columns: [[
            {
                field: 'id',
                checkbox: true
            }, {
                field: 'url',
                hidden: true

            }, {
                field: 'short_url',
                hidden: true

            }
            , {
                field: 'purity',
                hidden: true

            }, {
                field: 'category',
                hidden: true

            }, {
                field: 'dimension_x',
                hidden: true

            }, {
                field: 'dimension_y',
                hidden: true

            }, {
                field: 'resolution',
                hidden: true

            }, {
                field: 'ratio',
                hidden: true

            }, {
                field: 'ratio',
                hidden: true

            }, {
                field: 'file_type',
                hidden: true

            }, {
                field: 'colors',
                hidden: true

            }, {
                field: 'path',
                hidden: true

            }, {
                field: 'colors',
                hidden: true

            }, {
                field: 'created_at',
                hidden: true

            }, {
                field: 'thumbs',
                title: '图片',
                width: 400,
                align: 'left',
                formatter: function (value, row, index) {
                    if (value != '' && value != null) {
                        var data = eval('(' + value + ')');

                        var color = eval('(' + row.colors + ')');
                        var colorstr = "";

                        for (var i = 0; i < color.length; i++) {
                            colorstr = colorstr + '<div style="text-align:center;border: 1px solid #868181;width: 100px;margin-right: 5px;display: inline-block;border-radius: 5px;background-color:' + color[i] + '">' + color[i] + '</div>'
                        }


                        var str = `
						<table width="98%"  border="0" cellspacing="0">
  <tr>
    <td><img src="${data.small}" alt=""></td>
	<td>
	<ul class="picinfo">
		<li>url:${row.url}</li>
		<li>short_url:${row.short_url}</li>
		<li>views:${row.views}</li>
		<li>favorites:${row.favorites}</li>
		<li>purity:${row.purity}</li>
		<li>category:${row.category}</li>
		<li>dimension:${row.dimension_x}:${row.dimension_y}</li>
		<li>resolution:${row.resolution}</li>
		<li>ratio:${row.ratio}</li>	
		<li>file_size:${row.file_size}</li>
		<li>file_type:${row.file_type}</li>

		
		<li>colors:${colorstr}</li>	
	</ul>	
	</td>
  </tr>
</table>
						`;
                        return str;
                    }
                }

            }


        ]],

        onLoadSuccess: function (data) {
            $('#wallhavenpic-dg').datagrid('fixRowHeight'); //格式化后行号对齐
        },


        onDblClickRow: function (rowIndex, rowData) {


        },
        onSelect: function (index, row) {


        },
        rowStyler: function (index, row) {

        }
    });

    function getvalue() {
        var data = [];
        var general_categories = $("#general_categories").is(':checked');
        var anime_categories = $("#anime_categories").is(':checked');
        var people_categories = $("#people_categories").is(':checked');

        var general_categories_val = "0";
        var anime_categories_val = "0";
        var people_categories_val = "0";


        if (general_categories == true) {
            general_categories_val = "1"
        } else {
            general_categories_val = "0"
        }

        if (anime_categories == true) {
            anime_categories_val = "1"
        } else {
            anime_categories_val = "0"
        }
        if (people_categories == true) {
            people_categories_val = "1"
        } else {
            people_categories_val = "0"
        }

        var categories = general_categories_val + anime_categories_val + people_categories_val;
        data.categories = categories;


        var sfw_categories = $("#sfw_categories").is(':checked');
        var sketchy_categories = $("#sketchy_categories").is(':checked');
        var nsfw_categories = $("#nsfw_categories").is(':checked');

        var sfw_categories_val = "0";
        var sketchy_categories_val = "0";
        var nsfw_categories_val = "0";


        if (sfw_categories == true) {
            sfw_categories_val = "1"
        } else {
            sfw_categories_val = "0"
        }

        if (sketchy_categories == true) {
            sketchy_categories_val = "1"
        } else {
            sketchy_categories_val = "0"
        }
        if (nsfw_categories == true) {
            nsfw_categories_val = "1"
        } else {
            nsfw_categories_val = "0"
        }
        var purity = sfw_categories_val + sketchy_categories_val + nsfw_categories_val;
        data.purity = purity;

        var q = $("#search_q").val()
        data.q = q;
        return data;

    }

    // 搜索
    function search_haven() {

        var data = getvalue();

        $.post(APP + '/Home/Wallhaven/getpic', {
            categories: data.categories,
            purity: data.purity,
            q: data.q
        }, function (data) {

            $('#wallhavenpic-dg').datagrid('loadData', data);

        }, 'json');

    }
</script>